<template>
	<view class="register-container">
		<image class="background-image" src="/static/images/backg.png" mode="aspectFill"></image>
		
		<view class="content-overlay">
			<view class="header">
				<text class="title">用户注册</text>
				<text class="subtitle">请填写以下信息完成注册</text>
			</view>
			
			<view class="form-section">
				<view class="input-group">
					<text class="label">用户名 <text class="required">*</text></text>
					<input 
						class="input" 
						type="text" 
						placeholder="请输入4-20位用户名" 
						v-model="formData.username"
						maxlength="20"
					/>
				</view>
				
				<view class="input-group">
					<text class="label">密码 <text class="required">*</text></text>
					<input 
						class="input" 
						type="password" 
						placeholder="请输入6-20位密码" 
						v-model="formData.password"
						maxlength="20"
					/>
				</view>
				
				<view class="input-group">
					<text class="label">确认密码 <text class="required">*</text></text>
					<input 
						class="input" 
						type="password" 
						placeholder="请再次输入密码" 
						v-model="formData.confirmPassword"
						maxlength="20"
					/>
				</view>
				
				<view class="input-group">
					<text class="label">昵称</text>
					<input 
						class="input" 
						type="text" 
						placeholder="请输入昵称" 
						v-model="formData.nickname"
						maxlength="20"
					/>
				</view>
				
				<view class="input-group">
					<text class="label">手机号</text>
					<input 
						class="input" 
						type="number" 
						placeholder="请输入手机号" 
						v-model="formData.phone"
						maxlength="11"
					/>
				</view>
				
				<view class="input-group">
					<text class="label">QQ邮箱</text>
					<input 
						class="input" 
						type="text" 
						placeholder="请输入QQ邮箱" 
						v-model="formData.email"
					/>
				</view>
				
				<view class="input-group">
					<text class="label">性别</text>
					<picker 
						class="picker" 
						:value="genderIndex" 
						:range="genderOptions" 
						@change="onGenderChange"
					>
						<view class="picker-text">{{ genderOptions[genderIndex] }}</view>
					</picker>
				</view>
				
				<view class="security-section">
					<text class="section-title">密保问题 <text class="required">*</text></text>
					
					<view class="input-group">
						<text class="label">最喜欢的食物</text>
						<input 
							class="input" 
							type="text" 
							placeholder="请输入答案" 
							v-model="formData.favoriteFood"
							maxlength="50"
						/>
					</view>
					
					<view class="input-group">
						<text class="label">最想去的地方</text>
						<input 
							class="input" 
							type="text" 
							placeholder="请输入答案" 
							v-model="formData.favoritePlace"
							maxlength="50"
						/>
					</view>
					
					<view class="input-group">
						<text class="label">最喜欢的学校</text>
						<input 
							class="input" 
							type="text" 
							placeholder="请输入答案" 
							v-model="formData.favoriteSchool"
							maxlength="50"
						/>
					</view>
				</view>
				
				<button class="register-btn" @click="handleRegister" :loading="loading">
					{{ loading ? '注册中...' : '注册' }}
				</button>
				
				<view class="login-link">
					<text>已有账号？</text>
					<text class="link" @click="goToLogin">立即登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			formData: {
				username: '',
				password: '',
				confirmPassword: '',
				nickname: '',
				phone: '',
				email: '',
				gender: 0,
				favoriteFood: '',
				favoritePlace: '',
				favoriteSchool: ''
			},
			genderOptions: ['未知', '男', '女'],
			genderIndex: 0,
			loading: false
		}
	},
	methods: {
		onGenderChange(e) {
			this.genderIndex = e.detail.value;
			this.formData.gender = parseInt(e.detail.value);
		},
		
		validateForm() {
			if (!this.formData.username.trim()) {
				uni.showToast({
					title: '请输入用户名',
					icon: 'none'
				});
				return false;
			}
			
			if (this.formData.username.length < 4) {
				uni.showToast({
					title: '用户名至少4位',
					icon: 'none'
				});
				return false;
			}
			
			if (!this.formData.password.trim()) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				});
				return false;
			}
			
			if (this.formData.password.length < 6) {
				uni.showToast({
					title: '密码至少6位',
					icon: 'none'
				});
				return false;
			}
			
			if (this.formData.password !== this.formData.confirmPassword) {
				uni.showToast({
					title: '两次输入的密码不一致',
					icon: 'none'
				});
				return false;
			}
			
			if (!this.formData.favoriteFood.trim()) {
				uni.showToast({
					title: '请输入密保问题1答案',
					icon: 'none'
				});
				return false;
			}
			
			if (!this.formData.favoritePlace.trim()) {
				uni.showToast({
					title: '请输入密保问题2答案',
					icon: 'none'
				});
				return false;
			}
			
			if (!this.formData.favoriteSchool.trim()) {
				uni.showToast({
					title: '请输入密保问题3答案',
					icon: 'none'
				});
				return false;
			}
			
			return true;
		},
		
		async handleRegister() {
			if (!this.validateForm()) {
				return;
			}
			
			this.loading = true;
			
			try {
				// 根据性别设置默认头像
				let defaultAvatar = '/static/mUser.png'; // 默认男性头像
				if (this.formData.gender === 2) {
					defaultAvatar = '/static/fUser.png'; // 女性头像
				}
				
				const registerData = {
					...this.formData,
					avatar: defaultAvatar
				};
				
				const response = await uni.request({
					url: 'http://localhost:8080/user/register',
					method: 'POST',
					data: registerData,
					header: {
						'Content-Type': 'application/json'
					}
				});
				
				if (response.data.code === 200) {
					// 保存token和用户信息
					uni.setStorageSync('token', response.data.data.token);
					uni.setStorageSync('userInfo', response.data.data.user);
					
					uni.showToast({
						title: '注册成功',
						icon: 'success'
					});
					
					// 跳转到主页
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/home/home'
						});
					}, 1500);
				} else {
					uni.showToast({
						title: response.data.message || '注册失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('注册失败:', error);
				uni.showToast({
					title: '网络错误，请稍后重试',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},
		
		goToLogin() {
			uni.navigateBack();
		}
	}
}
</script>

<style lang="scss" scoped>
.register-container {
	min-height: 100vh;
	position: relative;
	overflow: hidden;
}

.background-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.content-overlay {
	position: relative;
	z-index: 2;
	min-height: 100vh;
	padding: 40rpx;
}

.header {
	text-align: center;
	margin-bottom: 60rpx;
	
	.title {
		font-size: 48rpx;
		color: #ffffff;
		font-weight: bold;
		display: block;
		margin-bottom: 20rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
	}
	
	.subtitle {
		font-size: 28rpx;
		color: #ffffff;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
	}
}

.form-section {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10rpx);
	border-radius: 20rpx;
	padding: 40rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
	border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.input-group {
	margin-bottom: 30rpx;
	
	.label {
		display: block;
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 15rpx;
		font-weight: 500;
		
		.required {
			color: #ff4757;
		}
	}
	
	.input {
		width: 100%;
		height: 80rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		background: #f8f9fa;
		
		&:focus {
			border-color: #4CAF50;
			background: #ffffff;
		}
	}
	
	.picker {
		width: 100%;
		height: 80rpx;
		border: 2rpx solid #e5e5e5;
		border-radius: 10rpx;
		background: #f8f9fa;
		
		.picker-text {
			line-height: 80rpx;
			padding: 0 20rpx;
			font-size: 28rpx;
			color: #333333;
		}
	}
}

.security-section {
	margin: 40rpx 0;
	padding: 30rpx;
	background: rgba(248, 249, 250, 0.8);
	border-radius: 15rpx;
	
	.section-title {
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		margin-bottom: 30rpx;
		display: block;
		
		.required {
			color: #ff4757;
		}
	}
}

.register-btn {
	width: 100%;
	height: 80rpx;
	background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
	color: #ffffff;
	border: none;
	border-radius: 10rpx;
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 30rpx;
	
	&:active {
		opacity: 0.8;
	}
}

.login-link {
	text-align: center;
	font-size: 28rpx;
	color: #666666;
	
	.link {
		color: #4CAF50;
		margin-left: 10rpx;
		
		&:active {
			opacity: 0.7;
		}
	}
}
</style> 